<script type="application/javascript">
  class ViewsCount {
    viewsBoxChart = null;
    xAxisData = {};
    seriesData = {}
    legendTitles = [];

    constructor(viewsBoxDom, legendTitles) {
      this.viewsBoxChart = echarts.init(viewsBoxDom);
      this.viewsOption && this.viewsBoxChart.setOption(this.viewsOption);
      this.legendTitles = legendTitles
    }

    reload(seriesData, xAxisData) {
      this.seriesData = seriesData;
      this.xAxisData = xAxisData;
      this.prepareViewsOption()
      this.viewsBoxChart.clear()
      this.viewsOption && this.viewsBoxChart.setOption(this.viewsOption);
    }

    resize() {
      this.viewsBoxChart.resize()
    }
    getLineSeries(name, data, color) {
      return {
        name,
        type: 'line',
        smooth: false,
        symbol: 'none',
        data,
        itemStyle: {
          normal: {
            color,
          }
        }
      }
    }
    prepareViewsOption() {
      this.viewsOption = {
        title: {
          text: '趋势图',
          textStyle: {
            fontSize: 14,
            fontWeight: '600'
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          top: 30,
          data: this.legendTitles
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: 100,
          containLabel: true
        },
        toolbox: {
          feature: {
            // saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.xAxisData
        },
        yAxis: {
          type: 'value',
        },
        // TODO: 目前只符合两张图的情况
        series:
          [this.getLineSeries(this.legendTitles[0], this.seriesData.dispatchCarNumber?this.seriesData.dispatchCarNumber:this.seriesData.collectionAmount, '#dd6b66'),
          this.getLineSeries(this.legendTitles[1], this.seriesData.returnCarNumber?this.seriesData.returnCarNumber:this.seriesData.paymentAmount, '#90CC75'),]
      };
    }
  }
</script>